<template>
  <view class="help-container">
	  <view class="header">
	  	<uni-icons fontFamily="iconfont" @click="goBack" :size="24" color="#666">{{'\ue64f'}}</uni-icons>  
	  </view>
       <view class="content">
         <view class="app-info text-center">
           <view><text class="app-name">人才痕迹APP</text></view>
           <view><text class="app-version">版本：{{version}}</text></view>
           <view><text class="download-text">扫码一键下载</text></view>
         </view>
         <uv-qrcode ref="qrcode" canvas-id="qrcanvas" size="300px" :value="qrCodeData"></uv-qrcode>
         <view class="version-info">
           <text>当前版本：{{version}}，服务器版本：{{onlineVersion}}</text>
         </view>
       </view>
       <view class="button-group">
         <button class="button" @click="saveQrcode">保存二维码</button>
         <button class="button" @click="checkVersion">版本检查</button>
         <button class="button" @click="goBack">返回首页</button>
       </view>
    </view>
  </view>
</template>
<script>
import VersionApi from '@/api/version.js'
import UvQrcode from '@/components/uv-qrcode/components/uv-qrcode/uv-qrcode.vue'
import config from '@/config'
export default {
	  components: {
		UvQrcode,
	},
	data() {
	    return {
	      qrCodeData: '',
		  version: config.appInfo.version,
		  onlineVersion: '',
	    };
	  },
	 async onLoad() {
		let res = await VersionApi.getApkLink()
		res?.data?.data && (this.qrCodeData = res.data.data)
		console.log('this.qrCodeData:', this.qrCodeData)
		res = await VersionApi.getVersion();
		res?.data?.data && (this.onlineVersion = res.data.data)
		console.log('this.onlineVersion:', this.onlineVersion)
	 },
	  methods: {
		goBack: uni.navigateBack,
		saveQrcode() {
			console.log('保存图片')
			this.$refs.qrcode.save({
			  success: () => {
			    this.$modal.msgSuccess('保存成功')
			  },
			  fail:() =>{
				  this.$modal.msgError('保存失败')
			  }
			});
	    },
	   async  checkVersion() {
			const res = await VersionApi.getVersion();
			res?.data?.data && (this.onlineVersion = res.data.data)
			console.log('this.onlineVersion:', this.onlineVersion)
			if(this.onlineVersion == this.version){
				this.$modal.msgSuccess('版本号一致，不需要更新！')
			} else {
				this.$modal.confirm(`有新的版本发布版本号:${this.onlineVersion}，是否需要安装最新版本？`, '版本更新').then(()=>{
							var _url = this.qrCodeData;
								  var dtask = plus.downloader.createDownload( _url, {}, function ( d, status ) {
										// 下载完成  
										if ( status == 200 ) {   []
											plus.runtime.install(plus.io.convertLocalFileSystemURL(d.filename),{},{},function(error){  
												uni.showToast({  
													title: '安装失败',  
													mask: false,  
													duration: 1500  
												});  
											})  
										} else {  
											 uni.showToast({  
												title: '更新失败',  
												mask: false,  
												duration: 1500  
											 });  
										}    
									});  
								 try {
									 dtask.start(); 
									var prg = 0;
									var showLoading = plus.nativeUI.showWaiting("正在下载");  //创建一个showWaiting对象 
									dtask.addEventListener('statechanged', function(task,status) {
									  // 给下载任务设置一个监听 并根据状态  做操作
									  switch (task.state) {
										case 1:
										  showLoading.setTitle("正在下载");
										  break;
										case 2:
										  showLoading.setTitle("已连接到服务器");
										  break;
										case 3:
										  prg = parseInt(
											(parseFloat(task.downloadedSize) /
											  parseFloat(task.totalSize)) *
											  100
										  );
										  showLoading.setTitle("  正在下载" + prg + "%  ");
										  break;
										case 4:                                                                                                                                                                                            
										   plus.nativeUI.closeWaiting();
											//下载完成
										  break;
									  }
									});
								  } catch (err) {
									  plus.nativeUI.closeWaiting();
									  uni.showToast({
										title: '更新失败-03',
										mask: false,
										duration: 1500
									  });
								  }									
				})
			}
				
	    }
	}
  }
</script>

<style lang="scss" scoped>
	@import "@/static/iconfont/iconfont.css";
  page {
    background-color: #f8f8f8;
  }
	.header {
		display: flex;
		align-items: flex-start;
		width: 100%;
		padding: 12px 0px;
		margin-bottom: 12upx;
		box-sizing: border-box;
	}
  .help-container {
    margin-bottom: 100rpx;
    padding: 30rpx;
	padding-top: var(--status-bar-height);
  }
.content {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.app-info {
  text-align: center;
  margin-bottom: 20px;
    color: #00aaff;
}

.app-name {
  font-size: 20px;
  font-weight: bold;
    color: #00aaff;
}

.app-version {
  font-size: 14px;
    color: #00aaff;
}

.download-text {
	 font-size: 14px;
	  margin-top: 10px;
	   color: #00aaff;
	}
	
	.qrcode {
	  width: 200px;
	  height: 200px;
	  margin-bottom: 20px;
	}
	
	.version-info {
	  margin-bottom: 20px;
	   color: #00aaff;
	}
	
	.button-group {
	  display: flex;
	  flex-direction: column;
	  align-items: center;
	}
	
	.button {
	  width: 150px;
	  height: 40px;
	  margin: 10px 0;
	  background-color: white;
	  color: #00aaff;
	  border-radius: 5px;
	  text-align: center;
	  line-height: 40px;
	}

</style>
